<template>
  <div class="app-container">

    <template v-for="btn in btns">
      <el-button :type="btn.type" @click="handlerClick(btn)" :key="btn.txt" :icon="btn.ui">{{btn.txt}}</el-button>
    </template>
    <el-table
      :data="tree"
      style="width: 100%; margin-bottom: 20px"
      v-loading="listLoading"
      element-loading-text="Loading"
      row-key="node.id"
      highlight-current-row
      default-expand-all
       @row-click="handleSelectionChange"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="node.title" label="菜单名称"></el-table-column>
      <el-table-column prop="node.path" label="路径"></el-table-column>
      <el-table-column prop="node.redirect" label="默认跳转"></el-table-column>
      <!-- <el-table-column
        prop="node.hidden"
        label="是否隐藏页（用于子页面）"
      ></el-table-column> -->
      <el-table-column label="是否隐藏页（用于子页面）">
        <template slot-scope="scope">
          {{scope.row.node.hidden?"是":"否"}}

        </template>
      </el-table-column>
      <el-table-column label="图标">
         <template slot-scope="scope">
            {{scope.row.node.icon}}
        </template>
      </el-table-column>
      <el-table-column prop="node.component" label="组件"></el-table-column>
       <el-table-column label="按钮">
         <template slot-scope="scope">
           <div class="btns"><span v-for="btn in tojson(scope.row.node.btns)" :key="btn.txt">{{btn.txt}}</span></div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.btns span+span::before {
  content: "、";
}
</style>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { menu,role2menuByIds } from '@/api/users'
import { UserModule } from '@/store/modules/user'
import { destory } from '@/api/users'
@Component({
  name: 'sys-menu'
})
export default class extends Vue {
  private listLoading = true

  private menuLs:any=[];
 
 private btn_add(){
   this.edrow();
 }
 private selectRow:any;
 private handleSelectionChange(val:any){
   this.selectRow=val;
 }
 private btn_update(){
   if(!this.selectRow){
     this.$alert('请选择要操作的项！');
     return;
   }
   this.edrow(this.selectRow.node.id);
 }
  private btn_delete() {
    if (this.selectRow) {
      this.$confirm('删除将不可恢复，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const {data} =await destory({tableName:'sys_menu',ids:this.selectRow.node.id})
          this.getMenu();
        })
        .catch(() => {})
    } else {
      this.$alert('请选择要操作的项！')
    }
  }

 private async edrow(id: any = '') {
   var pid='';
   
    var pms:any = { tableName: 'sys_menu',id:id}
    if(this.selectRow&&!id){
      pms.pid=this.selectRow.node.pid||id||'';
    }

    this.$router.push({
      path: '/sys/edrow',
      query: pms
    })
  }
  private btns=this.$router.currentRoute.meta.btns;
  
  private handlerClick(btn:any){
    var self:any=this;
    if(!self[btn.click]){
      this.$alert('没有"'+btn.click+'"方法的定义！');
    }else{
      self[btn.click]();
    }
    
  }
  private async role2menus(){
    const {data}=await role2menuByIds({'ids':UserModule.roles.join(',')});
  }
  private tree: any = []
  created() {
    console.log(this.$router.currentRoute.meta.btns);
    this.getMenu()
    this.role2menus();
  }

  private tojson(str:string){
    return eval('('+str+')');
  }
  private async getMenu() {
    const { data } = await menu({})
    data.forEach((it:any) => {
      console.log(it.node.btns);
      //it.btns=JSON.parse(it.btns);
    });
    
    this.tree = data
    this.listLoading = false
  }
}
</script>
